<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/organize-search.css" />
		<style>
			[v-cloak] {
				display: none !important;
			}
			
			.mui-bar .mui-title {
				right: 58px;
			}
			
			.mui-bar .mui-btn-link.mui-active, .mui-bar .mui-btn-link:active {
				color: #fff;
			}
			
			input[type=search] {
				text-align: left;
			}
		</style>
	</head>

	<body>
		<div id="refreshContainer">
			<div class="mui-content" id="keysaddresslist" v-cloak>
				<header class="mui-bar mui-bar-nav" style="padding-bottom: 44px;">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">
							<input type="search" class="mui-input-clear" id="searchKey" autofocus="autofocus" v-model.trim="search" placeholder="请输入关键词搜索">
					</h1>
					<button @click="searchQuery()" class="mui-btn mui-btn-link mui-pull-right">查询</button>
					<!--<button v-show="showclear" @click="showClear()" class="mui-btn mui-btn-link mui-pull-right">清空</button>-->
				</header>
				<div class="list-search" style="padding-top: 45px;">
				</div>
				<div v-show="flag" class="mui-control-content mui-active" style="text-align: center; line-height: 40px;font-size: 14px; color: #9999b0;">数据加载中</div>
				<div v-show="datas" class="mui-control-content mui-active" style="text-align: center; line-height: 40px;font-size: 14px; color: #9999b0;">暂无数据</div>
				<h5 class="mui-content-padded" v-if="users != null">党员</h5>
				<div id="item-member" class="mui-control-content mui-active" v-if="items != null">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in items.users">
							<a href="javascript:;" @click="showIntro(item)">
								<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
								<div class="mui-media-body" style="line-height: 42px; font-size: 16px;">
									{{item.name}}
								</div>
							</a>
						</li>
					</ul>
				</div>
				<h5 class="mui-content-padded" v-if="organizations != null">党组织</h5>
				<div id="item-depart" class="mui-control-content mui-active" v-if="items != null">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell orgs" v-for="item in items.organizations">
							<a href="javascript:;" @click="showOrgDetail(item)">
								<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/dzz.jpg">
								<div class="mui-media-body" style="font-size: 16px; line-height: 20px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
									{{item.name}}
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	var searchTxt = '';
	var waiting; //加载动画

	mui.init();

	mui.plusReady(function() {
		$("#searchKey").trigger("select").focus;
	});

	var queryvm = new Vue({
		el: "#keysaddresslist",
		data: {
			search: '',
			items: null,
			datas: false, //加载中
			flag: false, //无数据
			organizations: null,
			users: null,
			showclear: false,
		},
		watch: {
			/*search: function(n1) {
				this.datas = false;
				this.users = null;
				this.organizations = null;
				if(n1) {
					//this.flag = true;
					waiting = plus.nativeUI.showWaiting("数据加载中...");
					this.items = '';
					searchTxt = n1;
					setTimeout(function() {
						querykey(searchTxt);
						queryvm.showclear = true;
					}, 1000)
				}
			}*/
		},
		methods: {
			//	关键字查询
			searchQuery: function() {
				this.datas = false;
				this.users = null;
				this.organizations = null;
				if(this.search) {
					//this.flag = true;
					waiting = plus.nativeUI.showWaiting("数据加载中...");
					this.items = '';
					searchTxt = this.search;
					setTimeout(function() {
						querykey(searchTxt);
						queryvm.showclear = true;
					}, 1000)
				}
			},

			//	查看个人信息
			showIntro: function(item) {
				var appid = localStorageFunc.get('applogininfo').id;
				if(item.id == appid) {
					mui.toast('不支持和自己实时沟通');
					return;
				}
				mui.openWindow({
					url: '/html/im-chat.html',
					id: 'im-chat',
					createNew: false,
					extras: {
						'chattype': '0', //chattype类型：0 单聊 ; 1 群聊
						"userid": item.id, //自定义扩展参数，可以用来处理页面间传值
						"notestype": item.name,
						'userinfo': item
					},
					show: {
						autoShow: true,
						aniShow: 'slide-in-right',
						duration: 300
					},
					waiting: {
						autoShow: false,
						title: '正在加载...'
					}
				})
			},

			//	查看部门信息
			showOrgDetail: function(item, intro) {
				mui.openWindow({
					url: '/html/organize-groups-list.html',
					id: 'organize-groups-list?id=' + item.id,
					createNew: false,
					extras: {
						'info': item,
						'orginfo': intro
					},
					show: {
						autoShow: true,
						aniShow: 'slide-in-right',
						duration: 300
					},
					waiting: {
						autoShow: false,
						title: '正在加载...'
					}
				})
			},
			//	清空搜索
			showClear: function() {
				this.search = '';
				this.items = null;
				this.showclear = false;
				this.users = null;
				this.organizations = null;
			}
		},
		/*mounted() {
			//	处理不超过一行时，居中显示；多行数据时只显示两行数据并以省略号操出
			if($("#item-depart .orgs .mui-media-body").length > 0) {
				$.each($("#item-depart .orgs .mui-media-body"), function(index, item) {
					if($(item).height() <= 20) {
						$(item).css('line-height', '45px');
					} else {
						$(item).css('line-height', '20px');
					}
				})
			}
		}*/
	})

	//	搜索查询
	function querykey(key) {
		ctdj.user.queryContacts(key, function(r) {
			setTimeout(function() {
				if(r.success) {
					if(r.result.length != 0) {
						queryvm.flag = false;
						if(r.result.organizations.length != 0) {
							queryvm.organizations = r.result.organizations.length;
						}
						if(r.result.users.length != 0) {
							queryvm.users = r.result.users.length;
						}
						queryvm.items = r.result;

						if(r.result.organizations.length == 0 && r.result.users.length == 0) {
							queryvm.datas = true;
						}

						setTimeout(function() {
							if($("#item-depart .orgs .mui-media-body").length > 0) {
								$.each($("#item-depart .orgs .mui-media-body"), function(index, item) {
									$(item).height();
									if($(item).height() <= 30) {
										$(item).css('line-height', '45px');
									} else {
										$(item).css('line-height', '20px');
									}
								})
							}
						}, 300);
					}
				} else {
					queryvm.items = null;
				}

			}, 500);
			waiting.close();

		});
	}
</script>